<script>
import { categoryOptions, dataCycleOptions, list, page } from "@/views/product/competitor/api";
import { copy, gotoLink, isNull } from "@/utils/service";
import FilterTemplate from "@/views/product/competitor/filtrTemplate.vue";

export default {
  name: "index",
  components: { FilterTemplate },
  data() {
    return {
      table: {
        loading: true,
        baseData: [],
        data: [],
        total: 0,
        pages: 1,
        pageNo: 1,
        pageSize: 30
      },
      query: {
        dataCycle: "",
        category: ""
      },
      options: {
        dataCycle: {
          loading: true,
          loadingText: "获取选项中...",
          data: []
        },
        category: {
          loading: true,
          loadingText: "获取选项中...",
          data: []
        }
      }
    };
  },
  computed: {
    pageData() {
      this.table.total = this.table.data.length;
      const start = (this.table.pageNo - 1) * this.table.pageSize;
      const end = start + this.table.pageSize;
      return this.table.data.slice(start, end);
    },
    isTableShow() {
      return this.table.data.length > 0;
    }
  },
  methods: {
    gotoLink,
    isNull,
    pageCurrentChange(v) {
      this.table.pageNo = v;
    },
    pageSizeChange(v) {
      this.table.pageSize = v;
    },
    getTableData() {
      this.table.loading = true;
      list(this.query).then(res => {
        this.table.baseData = copy(res);
        this.table.data = res;
        this.table.total = res.length;
      }).finally(() => {
        this.table.loading = false;
      });
    },
    getDataCycleOptions() {
      this.options.dataCycle.loading = true;
      dataCycleOptions(this.query.category).then((res) => {
        this.options.dataCycle.data = res;
      }).finally(() => {
        this.options.dataCycle.loading = false;
      });
    },
    dataCycleChange(v) {
      if (isNull(v)) {
        return;
      }
      this.getTableData();
    },
    getCategoryOptions() {
      this.options.category.loading = true;
      categoryOptions().then((res) => {
        this.options.category.data = res;
      }).finally(() => {
        this.options.category.loading = false;
      });
    },
    perFormatter(row, column, cellValue, index) {
      return `${cellValue}%`;
    },
    filter(form) {
      let data = copy(this.table.baseData);
      data = data.filter(item => item.unitPrice >= form.unitPrice[0] && item.unitPrice <= form.unitPrice[1]);
      // 计算需要保留数据行编号
      let keepIds = data.sort((a, b) => b.transactionAmount - a.transactionAmount)
        .slice(0, Math.ceil(form.keep.tAmountPer / 100 * data.length))
        .map(item => item.id);
      keepIds.push(
        ...data.sort((a, b) => b.searchNum - a.searchNum)
          .slice(0, Math.ceil(form.keep.searchNumPer / 100 * data.length))
          .map(item => item.id));
      // 进行第二步过滤
      let p = form.keepOutside;
      data = data.filter(t => keepIds.includes(t.id)
        || t.uvValue > p.minUvValue && t.unitPrice >= p.unitPrice[0] && t.unitPrice <= p.unitPrice[1]);
      // 标题相关过滤
      data = data.filter(t => !form.titleNotContainStr.some(item => t.productTitle.includes(item))
        && form.titleContainStr.every(item => t.productTitle.includes(item)));
      this.table.data = data;
    },
    sortChange({ column, prop, order }) {
      console.log(column, prop, order);
      let c = function(a, b, field) {
        if (order === "ascending") {
          return a[field] - b[field];
        } else if (order === "descending") {
          return b[field] - a[field];
        } else {
          return b.transactionAmount - a.transactionAmount;
        }
      };
      this.table.data.sort((a, b) => {
        return c(a, b, prop);
      });
    }
  }
};
</script>

<template>
  <div>
    <div style="margin: 10px 0">
      <div>
        <!--头部搜索-->
        <div>
          <el-form :model="query" ref="queryFrom" :inline="true" size="mini">
            <el-form-item label="类目" prop="category">
              <el-select
                v-model="query.category"
                placeholder="请选择竞品类目"
                filterable
                clearable
                :loading-text="options.category.loadingText"
                :loading="options.category.loading"
                @focus="getCategoryOptions"
              >
                <el-option
                  v-for="item in options.category.data"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="数据周期" prop="dataCycle" v-show="!isNull(query.category)">
              <el-select
                v-model="query.dataCycle"
                placeholder="请选择数据周期"
                filterable
                clearable
                :loading-text="options.dataCycle.loadingText"
                :loading="options.dataCycle.loading"
                @focus="getDataCycleOptions"
                @change="dataCycleChange"
              >
                <el-option
                  v-for="item in options.dataCycle.data"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <!--头部按钮-->
        <div v-show="isTableShow">
          <filter-template @restore="getTableData" @filter="filter" />
        </div>
      </div>
      <!--主要内容区域-->
      <div style="margin-top: 5px">
        <div v-if="!isTableShow">
          <div style="text-align: center">
            <p style="font-size: 17px;color: #485460;font-weight: bold;letter-spacing: 0.2em">展示数据步骤</p>
            <p style="font-size: 15px;color: #485460;font-weight: bold;letter-spacing: 0.2em">1.选择竞品类目</p>
            <p style="font-size: 15px;color: #485460;font-weight: bold;letter-spacing: 0.2em">2.选择数据周期</p>
          </div>
        </div>
        <div v-else>
          <u-table
            @sort-change="sortChange"
            v-loading="table.loading"
            :row-height="40"
            border
            :data="pageData"
            use-virtual
            height="710px"
            row-class-name="plTableBox"
          >
            <u-table-column
              prop="platform"
              label="平台"
              width="50px"
              header-align="center"
            >
            </u-table-column>

            <u-table-column
              prop="storeName"
              label="店名"
              width="200px"
              header-align="center"
            >
            </u-table-column>

            <u-table-column
              prop="storeId"
              label="店铺编号"
              width="130"
              header-align="center"
            >
            </u-table-column>

            <u-table-column
              prop="newText"
              label="新品"
              width="80"
              header-align="center"
            >
            </u-table-column>

            <u-table-column
              prop="productTitle"
              label="商品标题"
              width="300"
              show-overflow-tooltip
              header-align="center"
            >
            </u-table-column>

            <u-table-column
              prop="productId"
              label="商品编号"
              width="130"
              header-align="center"
            >
            </u-table-column>

            <u-table-column
              prop="transactionAmount"
              label="交易金额"
              align="center"
              width="110"
              sortable
            >
            </u-table-column>

            <u-table-column
              prop="transactionGrowthRate"
              label="交易增长幅度"
              :formatter="perFormatter"
              align="center"
              width="130"
              sortable
            >
            </u-table-column>

            <u-table-column
              prop="visitorsNum"
              label="访客人数"
              sortable
              align="center"
              width="110"
            >
            </u-table-column>

            <u-table-column
              prop="searchNum"
              label="搜索人数"
              align="center"
              width="110"
              sortable
            >
            </u-table-column>

            <u-table-column
              prop="collectNum"
              label="收藏人数"
              align="center"
              width="110"
              sortable
            >
            </u-table-column>

            <u-table-column
              prop="backBuyNum"
              label="加购人数"
              align="center"
              width="110"
              sortable
            >
            </u-table-column>

            <u-table-column
              prop="payTransformRate"
              label="支付转化率"
              header-align="center"
              :formatter="perFormatter"
              align="center"
              width="120"
              sortable
            >
            </u-table-column>

            <u-table-column
              prop="payNum"
              label="支付人数"
              align="center"
              width="110"
              sortable
            >
            </u-table-column>

            <u-table-column
              prop="unitPrice"
              label="客单价"
              align="center"
              width="100"
              sortable
            >
            </u-table-column>

            <u-table-column
              prop="uvValue"
              label="VU价值"
              align="center"
              width="100"
              sortable
            >
            </u-table-column>

            <u-table-column
              prop="searchProportion"
              label="搜索占比"
              :formatter="perFormatter"
              sortable
              align="center"
              width="110"
            >
            </u-table-column>

            <u-table-column
              prop="collectRate"
              label="收藏率"
              align="center"
              width="100"
              :formatter="perFormatter"
              sortable
            >
            </u-table-column>

            <u-table-column
              prop="backBuyRate"
              label="加购率"
              align="center"
              width="100"
              :formatter="perFormatter"
              sortable
            >
            </u-table-column>

            <u-table-column
              prop="createTime"
              label="创建时间"
              header-align="center"
              width="160"
              sortable
            >
            </u-table-column>

            <u-table-column
              prop="updateTime"
              label="修改时间"
              header-align="center"
              width="160"
              sortable
            >
            </u-table-column>

            <u-table-column
              label="操作"
              header-align="center"
              width="100"
              fixed="right"
            >
              <template slot-scope="{row}">
                <el-button type="text" size="mini" @click="gotoLink(row.productLink)">跳转</el-button>
              </template>
            </u-table-column>

          </u-table>
        </div>
      </div>
      <!--底部分页工具区域-->
      <div style="text-align: center;margin: 10px 0" v-if="table.data.length > 0">
        <el-pagination
          background
          layout="sizes,prev, pager, next, jumper, ->, total"
          :total="table.total"
          :page-size="table.pageSize"
          :current-page="table.pageNo"
          :page-count="table.pages"
          :page-sizes="[30,50,100,300]"
          @size-change="pageSizeChange"
          @current-change="pageCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<style scoped>
/deep/ .plTableBox .el-table td {
  padding: 0 !important;
}

/deep/ .plTableBox .el-table th {
  padding: 0 !important;
}
</style>